// Name:                      Pagination
//
// Description:               Defines style for navigation
//
// Component:                `.am-pagination`
//
// Sub-objects:              `.am-pagination-prev`
//                           `.am-pagination-next`
//
// Modifiers:                `.am-pagination-centered`
//                           `.am-pagination-right`
//
// States:                   `.am-active`
//                           `.am-disabled`
//
// =============================================================================

/* ==========================================================================
   Component: Pagination
 ============================================================================ */

.@{ns}pagination {
    padding-left: 0;
    margin: @pagination-margin 0;
    list-style: none;
    color: @pagination-color;
    text-align: left;
    .clearfix();
    .hook-pagination;
    
    &.@{ns}pagination-disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    >li {
        display: inline-block;
        .hook-pagination-item;
        >a, >span {
            position: relative;
            // float: left; // Collapse white-space
            display: block;
            padding: @pagination-padding;
            text-decoration: none;
            line-height: @pagination-line-height;
            background-color: @pagination-bg;
            border: 1px solid @pagination-border;
            border-radius: @global-radius;
            margin-bottom: 5px;
            margin-right: 5px;
        }
        &:last-child {
            >a, >span {
                margin-right: 0;
            }
        }
    }
    >li>a, >li>span {
        &:hover {
            background-color: @pagination-hover-bg;
        }
    }
    >.@{ns}active>a, >.@{ns}active>span {
        &, &:hover, &:focus {
            z-index: 2;
            color: @pagination-active-color;
            background-color: @pagination-active-bg;
            border-color: @pagination-active-bg;
            cursor: default;
        }
        .hook-pagination-item-active;
    }
    >.@{ns}disabled {
        >span, >span:hover, >span:focus, >a, >a:hover, >a:focus {
            color: @pagination-disabled-color;
            background-color: @pagination-bg;
            border-color: @pagination-border;
            cursor: not-allowed;
            pointer-events: none;
            .hook-pagination-item-disabled;
        }
    }
    .@{ns}pagination-prev {
        float: left;
        a {
            border-radius: @global-radius;
        }
    }
    .@{ns}pagination-next {
        float: right;
        a {
            border-radius: @global-radius;
        }
    }
}

// Modifier
// =============================================================================
.@{ns}pagination-centered {
    text-align: center;
}

.@{ns}pagination-right {
    text-align: right;
}

// Hooks
// =============================================================================
.hook-pagination() {}

.hook-pagination-item() {}

.hook-pagination-item-active() {}

.hook-pagination-item-disabled() {}
